<template>
  <base-breadcrumb
    v-loading="loading"
    :title="titleName"
  >
    <div class="box">
      <a-card>
        <title-name title="项目信息" />
        <div class="main_content">
          <a-descriptions :column="{ xs: 2, sm: 2, md: 2 }">
            <a-descriptions-item label="所属单位">
              {{ project.branchCompany+'/'+project.projectName || '无' }}
            </a-descriptions-item>
            <!-- <a-descriptions-item label="分公司名称">
              {{ project.branchCompany || '无' }}
            </a-descriptions-item>
            <a-descriptions-item label="项目名称">
              {{ project.projectName || '无' }}
            </a-descriptions-item> -->
          </a-descriptions>
        </div>
      </a-card>
    </div>
    <div class="box">
      <a-card>
        <title-name title="索赔信息" />
        <div class="main_content">
          <a-descriptions :column="{ xs: 2, sm: 2, md: 2 }">
            <a-descriptions-item label="立项人">
              {{ claimInformation.projectSponsor }}
            </a-descriptions-item>
            <a-descriptions-item label="立项人电话号码">
              {{ claimInformation.phone }}
            </a-descriptions-item>
          </a-descriptions>
          <a-descriptions :column="{ xs: 2, sm: 2, md: 2 }">
            <a-descriptions-item label="立项人职务">
              {{
                claimInformation.proposalPersonPosition
              }}
            </a-descriptions-item>
            <a-descriptions-item label="预计索赔金额(万元)">
              {{
                claimInformation.estimatedClaimAmount
              }}
            </a-descriptions-item>
          </a-descriptions>
          <a-descriptions :column="{ xs: 2, sm: 2, md: 2 }">
            <a-descriptions-item label="立项时间">
              {{ claimInformation.projectTime }}
            </a-descriptions-item>
            <a-descriptions-item label="索赔小组成员">
              <a-tag
                v-for="(item, index) in claimInformation.claimsPanelMember"
                :key="index"
              >
                {{ item.name }}
              </a-tag>
            </a-descriptions-item>
          </a-descriptions>
          <a-descriptions :column="{ xs: 2, sm: 2, md: 2 }">
            <a-descriptions-item label="索赔事项">
              {{ claimInformation.claims }}
            </a-descriptions-item>
          </a-descriptions>
          <a-descriptions :column="{ xs: 2, sm: 2, md: 2 }">
            <a-descriptions-item label="索赔原因">
              {{ claimInformation.claimReason }}
            </a-descriptions-item>
          </a-descriptions>
        </div>
      </a-card>
    </div>
    <div
      v-if="loadData.length"
      class="box"
    >
      <a-card>
        <title-name title="推进记录" />
        <a-table
          bordered
          :columns="colums"
          :data-source="loadData"
          rowkey="id"
          :pagination="false"
        >
          <div
            slot="attach"
            slot-scope="text, record"
          >
            <file-link :file-list="record.fileArrays" />
          </div>
          <div
            slot="Serial"
            slot-scope="text, record, index"
          >
            <template>
              <span>{{ index + 1 }}</span>
            </template>
          </div>
          <div
            slot="feedback"
            slot-scope="text, record"
          >
            <template>
              <p
                v-for="(item, index) in record.feedback"
                :key="index"
                class="action_calss"
              >
                <span>{{ item.name }}</span>
                <span>{{ item.position }}</span>
                <span style="margin-left: 10px">{{ item.time }}反馈了一条意见</span>
                <a
                  style="margin-left: 10px"
                  @click="getDetails(item)"
                >查看</a>
              </p>
            </template>
          </div>
        </a-table>
      </a-card>
    </div>

    <comments
      v-if="form.id"
      :id="form.id"
      :is-detail="true"
    />

    <div
      v-if="output && output.salesDescription !== ''"
      class="box"
    >
      <a-card>
        <title-name title="索赔销项" />
        <div class="main_content">
          <a-descriptions :column="{ xs: 1, sm: 1, md: 1 }">
            <a-descriptions-item label="销项说明">
              {{ output.salesDescription || '无' }}
            </a-descriptions-item>
          </a-descriptions>
          <a-descriptions :column="{ xs: 1, sm: 1, md: 1 }">
            <a-descriptions-item label="销项证明文件">
              <file-link :file-list="output.fileArrays" />
            </a-descriptions-item>
          </a-descriptions>
        </div>
      </a-card>
    </div>
    <div
      v-if="$route.query.id"
      class="box"
    >
      <a-card>
        <title-name title="附件列表" />
        <u-table
          :upload-list="addFile"
          :delete-url="fileDel"
          :is-show="false"
          :list-url="fileList"
          :business-id="$route.query.id"
          business-code="LCM11"
        />
      </a-card>
    </div>
    <div
      class="operation page-btn-right-top"
    >
      <a-button
        v-checkVisibleInDetail
        @click="$close()"
      >
        关闭
      </a-button>
    </div>
    <div class="coverlayer" v-if="visible">
      <feed-back
        :visible="visible"
        :feedback-data="feedbackData"
        @ok="() => (visible = false)"
        @cancel="() => (visible = false)"
      />
    </div>
  </base-breadcrumb>
</template>

<script>
import {
  claimEstablishmentAddFile,
  claimEstablishmentDeleteFile,
  claimEstablishmentFindFileList, findBaseByCommentsId,
  getClaimEstablishmentDetails
} from '@/api/legal'
import feedBack from '../feedback'
import comments from './components/comments'


export default {
  name: 'ClaimEstablishmentDetails',
  components: {
    feedBack,
    comments
  },
  data() {
    return {
      titleName: undefined,
      loading: false,
      queryParam: {},
      colums: [
        {
          title: '序号',
          width: '80px',
          scopedSlots: { customRender: 'Serial' }
        },
        {
          title: '推进事项',
          align: 'center',
          dataIndex: 'promotionMatters'
        },
        {
          title: '附件',
          width: '200px',
          align: 'center',
          scopedSlots: { customRender: 'attach' }
        },
        {
          title: '创建时间',
          width: '200px',
          align: 'center',
          dataIndex: 'recordTime'
        }
        // {
        //     title: '意见反馈',
        //     scopedSlots: { customRender: 'feedback' }
        // }
      ],
      loadData: [],
      project: {},
      output: {},
      caseInformation: {},
      feedbackData: {},
      visible: false,
      claimInformation: {},
      addFile: claimEstablishmentAddFile(),
      fileDel: claimEstablishmentDeleteFile(),
      fileList: claimEstablishmentFindFileList(),
      form: {}
    }
  },
  mounted() {
    this.getData()
  },
  methods: {
    async getData() {
      this.loading = true
      let res
      if (this.$route.query.businessId && this.$route.query.businessType === '1006') {
        res = await findBaseByCommentsId({ id: this.$route.query.id })
      } else {
        res = await getClaimEstablishmentDetails({ id: this.$route.query.id })
      }
      if (res.code === this.SUCCESS_CODE) {
        this.loadData = res.data.advanceRecord || ''
        this.project = res.data.project || ''
        this.output = res.data.output || ''
        this.claimInformation = res.data.claimInformation || ''
        this.form = res.data
        console.log(this.form.id)
      }
      this.loading = false
    },
    getDetails(item) {
      //   console.log(item)
      this.feedbackData.name = item.name
      this.feedbackData.position = item.position
      this.feedbackData.time = item.time
      this.feedbackData.content = item.feedbackContent
      this.visible = true
    }
  }
}
</script>

<style scoped>
.box {
  margin: 12px 0;
}

.coverlayer {
  width: 100%;
  height: 100%;
  background: #000000;
  opacity: 0.4;
  filter: alpha(opacity=40);
}

.action_calss {
  margin-bottom: 0;
}

.main_content {
  padding: 0 20px;
  box-sizing: border-box;
}
</style>

